<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>购物车</title>
<link href="./css/common.css" rel="stylesheet" />
<link href="./css/common-head-footer.css" rel="stylesheet" />
<link href="./css/shop-car.css" rel="stylesheet" />
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
function selectAll(obj){
	var pitems=document.getElementsByName("pitem");
	for(var i=0;i<pitems.length;i++){
		pitems[i].checked=obj.checked;
	}
}
function goNextPage(){
	window.location="shop-car-02.jsp";
}

window.onload=function(){
	initListener();
};
function initListener(){
	var pitems=document.getElementsByName("pitem");
	for(var i=0;i<pitems.length;i++){
		var curId=pitems[i].value;
		var countItem=document.getElementById("count_"+curId);
		countItem.curId=curId;
		countItem.onkeyup=function(){
			var price=document.getElementById("price_"+this.curId).innerHTML.float();
			var xiaojiContainer=document.getElementById("xiaoji_"+this.curId);
			this.value=this.value.int();
			xiaojiContainer.innerHTML=price*this.value;
			calcAllPrice();
		};
	}
}
/**
 * 计算支付总额
 */
function calcAllPrice(){
	var totalPrice=0;
	var pitems=document.getElementsByName("pitem");
	for(var i=0;i<pitems.length;i++){
		var xiaoji=document.getElementById("xiaoji_"+pitems[i].value).innerHTML.float();
		totalPrice+=xiaoji;
	}
	document.getElementById("total_price").innerHTML=totalPrice;
}
function deleteSelected(){
	var pitems=document.getElementsByName("pitem");
	var hasSelected=false;
	for(var i=0;i<pitems.length;i++){
		if(pitems[i].checked){
			hasSelected=true;
			break;
		}
	}
	if(hasSelected){
		if(confirm("确认删除所选？")){
			for(var i=pitems.length-1;i>=0;i--){
				if(pitems[i].checked){
					pitems[i].parentNode.parentNode.parentNode.removeChild(pitems[i].parentNode.parentNode);
				}
			}
			calcAllPrice();
		}
	}
	else if(pitems.length>0){
		alert("请选择要删除的商品");
	}
	else{
		alert("购物车没有任何商品可以删除");
	}
}
function clearShopcar(){
	var pitems=document.getElementsByName("pitem");
	if(pitems.length<1){
		alert("购物车没有任何商品，不需要清空");
		return ;
	}
	if(confirm("确认清空购物车？")){
		for(var i=pitems.length-1;i>=0;i--){
			pitems[i].parentNode.parentNode.parentNode.removeChild(pitems[i].parentNode.parentNode);
		}
		calcAllPrice();
	}
}
</script>
</head>
<body>
<jsp:include page="./sub-blocks/header-block.jsp"></jsp:include>
<div class="shop-car-panel">
	<div class="location-bar" onselectstart="return false;">
		<div class="point-tip-on">购物车</div>
		<div class="arr-icon"></div>
		<div class="point-tip">购物车预览</div>
		<div class="arr-icon"></div>
		<div class="point-tip">填写订单</div>
		<div class="arr-icon"></div>
		<div class="point-tip">预览订单</div>
		<div class="arr-icon"></div>
		<div class="point-tip">完成订单</div>
	</div>
	<div class="product-list-container">
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr class="th">
				<td width="10"><input type="checkbox" onclick="selectAll(this)" /></td>
				<td width="300">名称</td>
				<td width="150">分类</td>
				<td width="90">单价</td>
				<td width="70">数量</td>
				<td width="130">小计</td>
				<td>&nbsp;</td>
			</tr>
			<tr class="tb">
				<td><input type="checkbox" value="1" name="pitem" /></td>
				<td>惠普笔记本电脑1</td>
				<td>笔记本</td>
				<td><span id="price_1">4500</span>￥</td>
				<td><input type="text" id="count_1" size="4" value="2"/></td>
				<td><span id="xiaoji_1">9000</span>￥</td>
				<td><a href="javascript:void(0)">删除</a></td>
			</tr>
			<tr class="tb">
				<td><input type="checkbox" value="2" name="pitem" /></td>
				<td>惠普笔记本电脑2</td>
				<td>笔记本</td>
				<td><span id="price_2">4500</span>￥</td>
				<td><input type="text" id="count_2" size="4" value="2"/></td>
				<td><span id="xiaoji_2">9000</span>￥</td>
				<td><a href="javascript:void(0)">删除</a></td>
			</tr>
		</table>
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr class="tf">
				<td class="left">
				
				<a href="javascript:void()" onclick="alert('继续选购')">继续选购</a>&nbsp;
				<a href="javascript:void()" onclick="deleteSelected()">删除所选</a>&nbsp;
				<a href="javascript:void()" onclick="clearShopcar()">清空购物车</a>&nbsp;
				
				</td>
				<td class="right">支付总额：<span id="total_price">18000</span>￥</td>
			</tr>
			<tr class="tf">
				<td class="right" colspan="2">
					<input type="button" class="next" onclick="javascript:goNextPage()" />
				</td>
			</tr>
		</table>
	</div>
</div>
<jsp:include page="./sub-blocks/footer-block.jsp"></jsp:include>
</body>
</html>